<template>
     <el-button type="primary" @click="drawer = true" :disabled="role==1">
          添加管理员
     </el-button>
     <el-table :data="filterData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号">
               <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column property="adminname" label="账户名">
               <template #default="scope">{{ scope.row.adminname }}</template>
          </el-table-column>
          <el-table-column property="role" label="权限">
               <template #default="scope">
                    <el-tag type="success" v-if="scope.row.role == 1">管理员</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.role == 2">超级管理员</el-tag>

               </template>
          </el-table-column>
          <el-table-column label="操作">
               <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                         Edit
                    </el-button>
                    <el-button size="small" v-if="role==2" type="danger" @click="handleDelete(scope.$index, scope.row)">
                         Delete
                    </el-button>
               </template>
          </el-table-column>
     </el-table>
       <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20,25,30]"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
     <el-drawer v-model="drawer" title="添加管理员" :with-header="true">
          <el-form :model="ruleForm">
               <el-form-item label="管理员账号" prop="adminname">
                    <el-input v-model="ruleForm.adminname" placeholder="请输入管理员账户名" type="textxx" autocomplete="off" />
               </el-form-item>
               <el-form-item label="管理员密码" prop="password">
                    <el-input v-model="ruleForm.password" placeholder="请输入管理员密码" type="password" autocomplete="off" />
               </el-form-item>
               <el-form-item label="管理员权限" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="选择管理员类型">
                         <el-option label="管理员" value="1" />
                         <el-option label="超级管理员" value="2" />
                    </el-select>
               </el-form-item>
          </el-form>
          <el-tree ref="treeRef" :data="data" show-checkbox node-key="path" :props="defaultProps" />
          <el-button type="primary" @click="addAdminHandler">确定</el-button>
     </el-drawer>
</template>

<script setup lang="ts"> 
import { getAdminList ,doAddAdmin} from '@/api/myadmin'
import { ref, reactive, computed } from 'vue'
 import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/useUser'
 
const useUser = useUserStore();
const {role} =  storeToRefs(useUser); 
 import { premission } from '@/utils/premission'
 premission()

// ======分页==========
const currentPage = ref(1)
const pageSize = ref(5)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
// =======发请求获取管理员数据==============

interface IAdmin {
     adminname: string
     adminid: string
     password?: string
     role: number,
     checkedKeys: string[]
}
const tableData = ref<IAdmin[]>([]);
getAdminList().then(res => {
     tableData.value = res.data.data;
})
const filterData = computed(()=>tableData.value.slice((currentPage.value-1)*pageSize.value,currentPage.value*pageSize.value))
// ==========管理员的页面操作删除和编辑===============
const handleEdit = (index: number, row: IAdmin) => {
     console.log(index, row)
}
const handleDelete = (index: number, row: IAdmin) => {
     console.log(index, row)
}

// =============抽屉形式进行管理员数据的添加========
const drawer = ref(false)
interface IAdmin1 {
     adminname: string
     password: string
     role: string,
     checkedKeys: string[]
}
const ruleForm = reactive<IAdmin1>({
     adminname: '',
     password: '',
     role: '',
     checkedKeys: []
})
console.log(ruleForm);

// ==============树形控件======
import type { TreeInstance } from 'element-plus'
// 注意：树形控件中没有实现像v-model一样双向数据绑定，我们如何实现页面选中完成之后，ruleForm的数据自动变化，手动设置
// 
const defaultProps = {
     children: 'children',
     label: 'label',
} 
const treeRef = ref<TreeInstance>()


// 把路由表导入过来
import { routes } from '@/router' 
// 过滤掉/login的
const filterRoutes = routes.filter(item => item.path != '/login'&& item.path != '/np')
// 再把它映射成上面的data的树形结构
function MyRoutesToData(routes: any) {
     const resRoutes = routes.map((item: any) => {
          const res = {
               path: item.path,
               label: item.meta?.title || '',
               children: []
          }
          if (item.children && item.children.length > 0) {
               res.children = MyRoutesToData(item.children)
          }
          return res;
     })
     return resRoutes;
}
console.log("asdfghjkl", MyRoutesToData(filterRoutes));
const data = MyRoutesToData(filterRoutes)
// ==============添加管理员操作========
const addAdminHandler = () => {
     ruleForm.checkedKeys = treeRef.value!.getCheckedKeys(false) as string[];
     console.log(ruleForm);
     doAddAdmin(ruleForm).then(res=>{
     console.log(res.data);
})
}

</script>

<style scoped></style>